<script setup lang="ts">
import { onBeforeMount, reactive, ref } from "vue";
import FileUpload from "@/components/jiuse/file-upload/index.vue";
import baseService from "@/service/baseService";
import SingleUpload from "@/components/jiuse/single-upload/index.vue";
import { ElMessage } from "element-plus";

const ruleFormRef = ref();

const loading = ref(true);

const form = reactive({
  household: 1,
  village: 1,
  domicile: 1,
  permanent: 1,
  area: 1,
  villagePublicize: "",
  villagePublicizeCover: "",
  integralPublicize: "",
  integralPublicizeCover: "",
  partyBuild: "",
  partyBuildCover: "",
  joinParty: "",
  joinPartyCover: "",
  isDefault: 1,
  id: ""
});

const name1 = ref();
const name2 = ref();

onBeforeMount(() => {
  getData();
});

const getData = () => {
  baseService
    .get("/clc/clcbaseinfo/page", { limit: 1, page: 1, isDefault: 1 })
    .then((res) => {
      if (res.data.list.length > 0) {
        Object.assign(form, res.data.list[0]);
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const rules = reactive({
  household: [{ required: true, message: "请输入", trigger: "blur" }],
  village: [{ required: true, message: "请输入", trigger: "blur" }],
  domicile: [{ required: true, message: "请输入", trigger: "blur" }],
  permanent: [{ required: true, message: "请输入", trigger: "blur" }],
  area: [{ required: true, message: "请输入", trigger: "blur" }],
  villagePublicize: [{ required: true, message: "请上传", trigger: "blur" }],
  villagePublicizeCover: [{ required: true, message: "请上传", trigger: "blur" }],
  integralPublicize: [{ required: true, message: "请上传", trigger: "blur" }],
  integralPublicizeCover: [{ required: true, message: "请上传", trigger: "blur" }],
  partyBuild: [{ required: true, message: "请上传", trigger: "blur" }],
  partyBuildCover: [{ required: true, message: "请上传", trigger: "blur" }],
  joinParty: [{ required: true, message: "请上传", trigger: "blur" }],
  joinPartyCover: [{ required: true, message: "请上传", trigger: "blur" }]
});

const submitForm = async (formEl: any | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      (!form.id ? baseService.post : baseService.put)("/clc/clcbaseinfo", form).then((res) => {
        ElMessage.success({
          message: "保存成功",
          duration: 2000,
          onClose: () => {
            getData();
          }
        });
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: any | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<template>
  <el-form :model="form" :rules="rules" label-width="150px" ref="ruleFormRef" v-loading="loading" element-loading-text="获取数据中..">
    <el-row>
      <el-col :span="12">
        <el-form-item label="总户数：" prop="household">
          <el-input-number v-model="form.household" :min="1" />
          <div class="dw">户</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="自然村数量：" prop="village">
          <el-input-number v-model="form.village" :min="1" />
          <div class="dw">个</div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="户籍人口：" prop="domicile">
          <el-input-number v-model="form.domicile" :min="1" />
          <div class="dw">人</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="常住人口：" prop="permanent">
          <el-input-number v-model="form.permanent" :min="1" />
          <div class="dw">人</div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="面积：" prop="area">
      <el-input-number v-model="form.area" :min="1" />
      <div class="dw">平方公里</div>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="乡村宣传视频：" prop="villagePublicize">
          <FileUpload style="width: 70%" v-model:ossPath="form.villagePublicize" v-model:ossName="name1" accept="video/*" fileType="视频" :limit="1" :multiple="false"></FileUpload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="乡村宣传视频封面：" prop="villagePublicizeCover">
          <single-upload v-if="!loading" :key="'admin2'" v-model="form.villagePublicizeCover"></single-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="积分制宣传片：" prop="integralPublicize">
          <FileUpload style="width: 70%" v-model:ossPath="form.integralPublicize" v-model:ossName="name2" accept="video/*" fileType="视频" :limit="1" :multiple="false"></FileUpload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="积分制宣传片封面：" prop="integralPublicizeCover">
          <single-upload v-if="!loading" :key="'admin'" v-model="form.integralPublicizeCover"></single-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="党建课堂视频：" prop="partyBuild">
          <FileUpload style="width: 70%" v-model:ossPath="form.partyBuild" v-model:ossName="name2"
                      accept="video/*" fileType="视频" :limit="1" :multiple="false"></FileUpload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="党建课堂视频封面：" prop="partyBuildCover">
          <single-upload v-if="!loading" :key="'admin'" v-model="form.partyBuildCover"></single-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="入党流程视频：" prop="joinParty">
          <FileUpload style="width: 70%" v-model:ossPath="form.joinParty" v-model:ossName="name2"
                      accept="video/*" fileType="视频" :limit="1" :multiple="false"></FileUpload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="入党流程视频封面：" prop="joinPartyCover">
          <single-upload v-if="!loading" :key="'admin'" v-model="form.joinPartyCover"></single-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="less">
.dw {
  margin-left: 16px;
}
</style>
